import React from "react";
import {CheckboxItem} from '../styled';
import { Checkbox } from "antd";

interface IProps {
    moderatorStatus:boolean,
    inviteStatus: boolean,
    setInviteStatus(flag: boolean): void,
    setModeratorStatus(flag: boolean): void
}

function ProCheckGroup(props:IProps) {
    // 属性
    const {
        moderatorStatus,
        inviteStatus
    } = props;
    // 事件
    const {
        setModeratorStatus,
        setInviteStatus
    } = props;

    const moderatorChange = (e:any) => {
        setModeratorStatus(e.target.checked);
    };
    const inviteChange = (e: any) => {
        setInviteStatus(e.target.checked);
    };

    return(
        <>
            <CheckboxItem>
                <Checkbox
                    checked={moderatorStatus}
                    onChange={ moderatorChange }
                >
                    Wait for Moderator
                </Checkbox>
            </CheckboxItem>
            <CheckboxItem>
                <Checkbox
                    checked={inviteStatus}
                    onChange={ inviteChange }
                >
                    Allow Participant on Invite</Checkbox>
            </CheckboxItem>
        </>
    )
}

export default React.memo(ProCheckGroup)